<template>
  <div class="home-nav">
    <logo></logo>
    <el-menu
      class="el-menu-vertical-demo"
      active-text-color="#3496FF"
      :collapse="false"
      :default-active="pathActive"
      :default-openeds="defaultOpeneds">
      <template v-if="isFold">
        <el-submenu
          v-for="(routeGroup, i) in leftLayerList"
          :key="i"
          :index="`${i + 1}`">
          <template slot="title">
            <div class="title">{{routeGroup.menuName}}</div>
          </template>
          <el-menu-item-group>
            <el-menu-item
              v-for="item of routeGroup.children"
              :key="item.id" @click="handleMenuName(item)"
              :index="item.path">
              <span class='menu-icon' :style='{ backgroundImage: `url(${item.icon})` }'></span>
              <span slot="title">{{item.menuName}}</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </template>
      <template v-else>
        <div class="group-item"
          v-for="(routeGroup, i) in leftLayerList"
          :key="i"
          :index="`${i + 1}`">
          <div class="title">{{routeGroup.menuName}}</div>
          <div class="menu-list" v-if='routeGroup.children'>
            <el-menu-item
              v-for="item of routeGroup.children"
              :key="item.id" @click="handleMenuName(item)"
              :index="item.path">
              <span class='menu-icon' :style='{ backgroundImage: `url(${item.icon})` }'></span>
              <span slot="title">{{item.menuName}}</span>
            </el-menu-item>
          </div>
        </div>
      </template>
    </el-menu>
  </div>
</template>

<script>
import Logo from 'public/logo'
export default {
  props: {
    isFold: { // 菜单组是否可以折叠
      type: Boolean,
      default: false
    }
  },
  components: {
    Logo
  },
  data () {
    return {
      defaultOpeneds: ['1', '2', '3']
    }
  },
  computed: {
    // 菜单选中
    pathActive () {
      let currActiveRoute = ''
      let currMenu = {}
      let menuList = []
      // 取所有分组的菜单
      this.leftLayerList.forEach(routeGroup => {
        menuList = menuList.concat(routeGroup.children)
      })
      menuList.forEach(route => {
        if (this.pathRoute && this.pathRoute.indexOf(route.path) !== -1) {
          currActiveRoute = route.path
          currMenu = route
        }
      })
      if (currActiveRoute) {
        // 更新子菜单
        this.setMenuName(currMenu.menuName)
        this.setSubMenus(currMenu)
        return currActiveRoute
      } else {
        return this.pathRoute
      }
    }
  },
  methods: {
    // 点击切换
    handleMenuName (menu) {
      // 处理会务的路由
      this.setMenuName(menu.menuName)
      // 找到该菜单的第一个子菜单，进行跳转(不同身份菜单数据不同)
      let firstSubPath = ''
      if (menu.path === '/home/app') {
        // 处理互动应用的子菜单显示问题
        firstSubPath = menu.path
      } else if (!menu.children || !menu.children[0]) {
        firstSubPath = menu.path
      } else {
        let length = menu.children.length
        menu.children.forEach((subMenu, index) => {
          if (subMenu.children && subMenu.children[0]) {
            subMenu.children.forEach(thirdMenu => {
              if (!firstSubPath) {
                firstSubPath = thirdMenu.path
              }
            })
          } else {
            if (!firstSubPath && index === length - 1) {
              firstSubPath = subMenu.path
            }
          }
        })
      }
      // // 点击左侧菜单，跳转到根路由，再重定向到想要的页面
      // let firstSubPath = menu.path
      this.linkTo({ path: firstSubPath })
    },
    handleOpen (index, indexPath) {
    },
    handleClose (index, indexPath) {
      // 折叠当前子菜单打开其他的子菜单
      let arr = ['1', '2', '3']
      arr.splice(index - 1, 1)
      this.defaultOpeneds = arr
    }
  },
  created () {
  }
}
</script>

<style lang="stylus" scoped>
  .home-nav
    scroll()
    max-width 180px!important
    height 100%
    // background-color #F7F7F7
    &::-webkit-scrollbar
      width 0px
      height 8px
    &::-webkit-scrollbar-thumb
      border-radius 4px
      -webkit-box-shadow inset 0 0 5px rgba(0,0,0,0.2);
      background #CCE5FF
    &::-webkit-scrollbar-track
      background transparent
    .group-item
      width 100%
      .title
        padded_box(border-box, 0 20px)
    .title
      width 100%
      height 44px
      line-height 44px
      font-size 18px
      color #f2f2f2
      cursor: pointer;
      user-select: none;
    .menu-icon
      display inline-block
      width 16px
      height 20px
      vertical-align middle
      background-repeat no-repeat
      background-position right 0 center
      background-size 20px 20px
      margin 0 5px 0 26px
      padding-left 6px
</style>
